<template>
  <div class="graph" :class="comClass">
    <input v-if="node.data?.isEdit" v-model="label" class="graph-input" placeholder="输入" @input="onChaneg" />
    <template v-else>{{ label }}</template>
  </div>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
//获取动态数据
const props = defineProps({
  node: {},
  graph: {},
});
const label = ref('');
const onChaneg = () => {
  Object.assign(props.node.data, { label: label.value });
};
const comClass = computed(() => {
  return {
    'graph-react': true, //矩形
    'graph-circle': props.node.data?.circle, //圆形
    'graph-radius': props.node.data?.radius, //有矩形弧度
  };
});
const getStr = () => {
  if (props.node.data?.isEdit) {
    return '可编辑';
  }
  if (props.node.data?.circle) {
    return '圆形';
  }
  return '矩形';
};
watch(
  () => props.node.data?.label,
  (v) => {
    if (props.node.data?.isEdit) {
      label.value = v || '';
    } else {
      label.value = v || getStr();
    }
  },
  { immediate: true },
);
</script>
<style lang="less" scoped>
.graph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.graph-react {
  width: 66px;
  height: 36px;
  background: #eff4ff;
  border: 1px solid #5f95ff;
}

.graph-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
}

.graph-radius {
  border-radius: 10px;
}

.graph-input {
  width: 90%;
  font-size: 12px;
  text-align: center;
  background-color: transparent;
  border: 0;
  outline: none;
}
</style>
